<template>
  <div class="voice-icon-wrap" ref="vc">
    <div class="hu-voice-icon">
      <i class="iconfont icon-voice" @click.stop="talkStart"></i>
    </div>
    <transition name="fadeShow">
      <div class="voice-wrap" v-if="show" @click="talkOver">
        <img src="../../images/speak3.gif" class="img-vc" />
        <span style="font-size: 16px">语音录入中...</span>
      </div>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  props: {
    isSearch: {
      default: false,
    },
    // 是否只读
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 与语音绑定的输入id
    id: {
      type: String,
      default: "textarea",
    },
    // 已经输入的内容
    oldValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      msg: "",
      show: false,
    };
  },
  methods: {
    // 开始录音的代码写在此处
    talkStart() {
      // if (this.readOnly) {
      //   return;
      // }
      // if (!this.$store.state.app.isClient) {
      //   return Toast.fail("检测到当前客户端不可用语音录入功能！");
      // }
      // let is = this._props.isSearch;
      // let self = this;
      // let val = this.oldValue;
      // let el;
      // self.show = true;
      // if (!is) {
      //   el = this.$refs.vc.parentNode.parentNode.querySelector(this.id);
      //   if (el) val = el.value;
      // }
      // // 1、开始 2、 停止 3 、 取消   默认 1
      // _vrvInit.voiceToTxt((v) => {
      //   if (is) {
      //     let vv = v
      //       .toString()
      //       .replace(
      //         /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g,
      //         ""
      //       );
      //     _data.bus.$emit("searchVoice", vv);
      //   } else {
      //     // el.value = val + v;
      //     this.$emit("vc", val + v);
      //   }
      //   self.talkOver();
      // }, 1);
    },
    talkOver() {
      // this.show = false;
      // _vrvInit.voiceToTxt(v => {}, 3);
    },
  },
};
</script>

<style lang="scss">
@import "@/style/color";
.voice-wrap {
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  .img-vc {
    margin-top: 18px;
    margin-bottom: 20px;
    height: 80px;
  }
}
.hu-voice-icon {
  color: $blue;
  transform: rotate(45deg);
}
</style>
